<!--
 * @Author: zhangweili zhang_weili@uxsino.com
 * @Date: 2023-02-23 17:22:17
 * @LastEditors: zhangweili zhang_weili@uxsino.com
 * @LastEditTime: 2023-02-28 14:32:04
 * @FilePath: \CMS\src\views\cms\realtime-monitor\monitor6c\icedetection.vue
 * @Description: 结冰检测, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="content">

    <div class="header">
      <div class="left">
        <p>
          <span>今天：-3～9℃</span>
          <span>风向：14～25°</span>
          <span>风速：14～25m/s</span>
        </p>
      </div>
      <div class="right">
        2023-02-03   12:23:45
      </div>

    </div>
    <div class="app-container h-flex" style="padding:0;height:calc(100% - 60px)">
      <div class="app-container__left tree-box">
        <div class="type-title">设备分类</div>
        <el-tree
          ref="tree"
          :data="deviceTypes"
          node-key="id"
          icon-class="el-icon-arrow-right"
          :expand-on-click-node="false"
          default-expand-all
          :props="{ children: 'children', label: 'typeName', value: 'id' }"
          @node-click="chooseDevice" />
      </div>
      <div class="app-container__right h-flex-elastic v-flex overflow-hidden">
        <div ref="main" class="v-flex-elastic">
          <div class="marin-top">
            <div class="row1">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <img src="@/assets/images/3836e689c58e5ea49048f626a97192a.png" alt>
                  <span>当前气象</span>
                </div>
                <div class="cardMain">
                  <ul class="right">
                    <li>
                      <strong>
                        -7℃
                      </strong>
                    </li>
                    <li>
                      <span class="greenTxt">结冰</span>
                    </li>
                    <li>
                      结冰厚度:<span>15mm</span>
                    </li>
                  </ul>
                </div>
              </el-card>
            </div>
            <div class="row2">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <img src="@/assets/images/3836e689c58e5ea49048f626a97192a.png" alt>
                  <span style="margin-right:7px;">结冰厚度</span>
                </div>
                <div class="cardMain">
                  <div ref="charts1" class="cardMain" />
                </div>
              </el-card>
            </div>
            <div class="row3">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <img src="@/assets/images/3836e689c58e5ea49048f626a97192a.png" alt>
                  <span style="margin-right:7px;">现场图片</span>
                </div>
                <div class="cardMain" />
              </el-card>
            </div>
          </div>
          <div class="marin-bottom">
            <div class="row4">
              <el-card class="box-card">
                <div
                  slot="header"
                  style="display: flex;justify-content: space-between;width: 100%;height: 100%;align-items: center;">
                  <div style="display:flex;align-items: center">
                    <img src="@/assets/images/chrts.png" style="margin-right:7px;" alt>
                    <span style="margin-right:7px;">24小时气象曲线</span>
                  </div>
                </div>
                <div class="deptbox">
                  <el-button-group>
                    <el-button type="defalut">温度</el-button>
                    <el-button type="defalut">湿度</el-button>
                    <el-button type="defalut">气压</el-button>
                    <el-button type="defalut">光辐射强度</el-button>
                  </el-button-group>
                  <span class="dept">％RH</span>
                </div>
                <div ref="charts3" class="cardMain" />
              </el-card>
              <!-- <div class="lend"></div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>
<script>
import {
  getListTree,
  getListPage,
  deleteData,
  addOrEditData,
  getList,
  getCList,
  getById,
  getCheckById,
  getByTypeNo,
  getJcjcType
} from '@/api/cms/equipment/classType'
import echarts from 'echarts'
export default {
  name: 'ClassType',
  components: {
    // GeometryEditor
  },
  data() {
    return {
      listQuery: {
        page: 1,
        size: 20,
        typeName: '',
        id: '',
        fid: '',
        typeNo: ''
      },
      filterData: {
        keyName: {
          key: 'typeName',
          type: 'input',
          placeholder: '设备分类名称'
        }
      },
      activeName: 'first',
      oldArr: {},
      addtionParam: {},
      fname: {},
      // 下拉list
      deviceTypes: [],
      Clist: [],
      ctypes: [],
      isReloadData: true,
      ruless: [],
      TypeList: [],
      listid: '',
      num: '',
      maxlength: [50, 200, 500]
    }
  },
  created() {
    this.getList()
    this.getByList()
    this.loadData()
  },
  mounted() {
    // 绑定监听
    // window.addEventListener("beforeunload", (e) => this.closeWebSocket(e));
    this.$nextTick(() => {
      this.getcharts1()
      this.getcharts3()
    })
  },
  methods: {
    getByList() {
      getList().then(response => {
        this.TypeList = response.data
        for (var i = 0, lenI = this.TypeList.length; i < lenI; ++i) {
          this.TypeList[i].id = String(this.TypeList[i].id)
        }
      })
    },
    getList() {
      // 设备分类
      getListTree({ fid: 1 }).then(response => {
        this.deviceTypes = Object.freeze(response.data)
        this.$nextTick(_ => {
          this.$refs.tree.setCurrentKey('')
        })
      })
    },
    chooseDevice(item) {
      this.listQuery.id = item.id
      this.dialog.initForm = item.id ? {
        typeNo: item.typeNo,
        typeName: item.typeName
      } : {}
      this.search()
      this.getList()
      this.listQuery = {}
    },
    loadData() {
      getJcjcType().then(response => {
        this.Clist = response.data
        for (var i = 0, lenI = this.Clist.length; i < lenI; ++i) {
          this.Clist[i].dictionaryId = String(this.Clist[i].dictionaryId)
        }
      })
    },
    changeTypeList(data) { // 这个下拉的id
      if (data) {
        getById(data).then(response => {
          this.isReloadData = false
          // this.$set(this.dialog.Clist, 'dictionaryId', response.data.dtId)
          this.dialog.form.Clist.dictionaryId = response.data.dtId
          this.dialog.form.Clist.itemName = response.data.itemName
          this.isReloadData = true
        })
      }
    },
    changeJcjcType(data) {
      this.isReloadData = true
      this.dialog.form.Clist.dictionaryId = data
    },
    getByTypeNos(typeNo) {
      getByTypeNo(typeNo).then(response => {
        var types = response.data[0]
        this.ruless = types
        this.dialog.form.Clist.dictionaryId = this.ruless.dictionaryId
      })
    },
    // 新加 新加
    getcharts1() {
      const myChart = echarts.init(this.$refs.charts1)
      const option = {
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['00:00', '01:15', '02:30', '03:45', '05:00']
        },
        yAxis: {
          type: 'value',
          axisLine: { onZero: false },
          boundaryGap: true
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line'
        }]
      }

      myChart.setOption(option)
    },
    getcharts3() {
      const myChart = echarts.init(this.$refs.charts3)
      const option = {
        grid: {
          left: '3%',
          right: '4%',
          top: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['00:00', '01:15', '02:30', '03:45', '05:00']
        },
        yAxis: {
          type: 'value',
          axisLine: { onZero: false },
          boundaryGap: true
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line'
        }]
      }

      myChart.setOption(option)
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    connectWS: function() {
      if (typeof WebSocket === 'undefined') {
        this.$message({
          type: 'warning',
          message: '当前浏览器不支持WebSocket',
          showClose: true
        })
      } else {
        const url =process.env.VUE_APP_C6_WEBSOCKET_API + this.voh_config.deviceIdentification + '?req=ok'
        this.websocket = new WebSocket(url)
        this.websocket.onopen = this.open
        this.websocket.onerror = this.error
        this.websocket.onmessage = this.message
        this.websocket.onclose = this.close
      }
    },
    open: function() {
      console.log('WebSocket Connected successfully~')
    },
    error: function(e) {
      console.log('WebSocket Error: ' + JSON.stringify(e))
    },
    message: function(msg) {
      console.log('WebSocket Message: ', msg.data)
      const newData = JSON.parse(msg.data)

      // 告警信息
      if (newData['startsAt']) {
        this.$notify({
          title: newData.startsAt,
          message: newData.annotations.summary,
          type: 'warning'
        })
        return
      }

      newData['hasNew'] = true
      let updateIndex = Number.MAX_VALUE
      for (let i = 0; i < this.tableNames.length; i++) {
        if (this.tableNames[i] == 'device' + newData['sn']) {
          updateIndex = i
          break
        }
      }
      if (updateIndex != Number.MAX_VALUE) {
        // add class
        newData['hasNew'] = true
        this.powers[updateIndex] = newData
        console.log('2', this.powers[updateIndex]['hasNew'])

        this.$nextTick(function() {
          newData['hasNew'] = false
          this.powers[updateIndex] = newData
          // this.powers.splice(updateIndex, 1, newData);
          console.log('1', this.powers[updateIndex]['hasNew'])
        })
      }
    },
    send: function(params) {
      this.websocket.send(params)
    },
    close: function() {
      console.log('WebSocket Disconnected!')
      setTimeout(() => {
        console.log('WebSocket reconnecting...')
        this.connectWS(this.thisCity)
      }, 3000)
    },
    closeWebSocket: function() {
      console.log('Closing websocket...')
      if (this.websocket) {
        this.websocket.close()
      }
    },

    // 刷新页面是关闭WebSocket连接
    beforeUnmount() {
      window.removeEventListener('beforeunload', (e) => this.closeWebSocket(e))
    }
  }
}
</script>
<style scoped lang="scss">
 .content {
  width: 100%;
  height: 95%;
  background: #f1f4fb;
  padding: 0 20px;
  }
  .header {
    height: 60px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left{
      display: flex;
      align-items: center;
    }
  }
  /deep/.box-card {
    width: 100%;
    height: 100%;
    margin: 0 !important;
    float: none;
    background: #ffffff;
    box-shadow: 0px 0px 10px 5px rgba(0, 47, 138, 0.04);
    border-radius: 6px;
    border: 0;
  }
  .clearfix {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
  }
  .clearfix span {
    font-weight: 350;
    font-size: 18px;
    color: #061b48;
  }
  .clearfix img {
    width: 20px;
    height: 20px;
    margin-right: 7px;
  }
  .marin-top{
    margin-bottom:10px;
    width:100%;height:55%; display: flex;justify-content: space-between;
    .row1{
      width:20%;height:100%;
    }
    .row2{
      width:44.4%;height:100%;

    }
    .row3{
      width:34.2%;height:100%;
    }
  }
  .marin-bottom{
    width:100%;height:42%;display: flex;justify-content: space-between;
    .row4{
      width:100%;height:100%;display:flex;
    }
  }
  /deep/.el-card__body {
      padding: 0;
      width: 100%;
      height: calc(100% - 60px);
      border: 0;
    }
  .cardMain{
      width: 100%;
      height: 100%;
      .right{
        padding-top:30px;
        li{
          line-height: 60px;
        }
        text-align: center;
        strong{
          font-size: 70px;
        }
        .greenTxt{
          font-size: 30px;
          color: #059b43;
        }
      }
  }
</style>
